<template>
<div v-transfer-dom>
      <popup v-model="showthis" @on-hide="hideFunc()" position="left" width="80%">
        <div class="position-horizontal-demo">
       <div class="prop">
		<div class="prop-submit">
			<p>懂球帝</p>
			<p>一个纯粹而有爱的足球世界</p>
			<input type="button" value="立即登录" @click='submit()'>
		</div>
		<div class="prop-nav">
			<ul>
				<li><span></span><a href="##" @click='tanchuang()'>我的通知</a></li>
				<li><span></span><a href="##" @click='fenxiang()'>我要分享</a></li>
				<li><span></span><a href="##" @click='warn()'>系统消息</a></li>
				<li><span></span><a href="##">我的订单</a></li>
			</ul>
			<div v-transfer-dom>
      			<alert v-model="sw" :title="title"> {{content}}</alert>
    		</div>
    		<actionsheet v-model="show1" :menus="menus1"></actionsheet>
    		<toast v-model="show2" type="warn">这里并没有系统</toast>
		</div>
		<div class="list">
		<div>
			<div></div>
			<p>我是教练</p>
		</div>
		<div>
			<div></div>
			<p>我是教练OL</p>
		</div>
		<div>
			<div></div>
			<p>足彩充值</p>
		</div>
		<div>
			<div></div>
			<p>中超精彩</p>
		</div>
		<div>
			<div></div>
			<p>定场地</p>
		</div>
		<div>
			<div></div>
			<p>商城</p>
		</div>
		<div>
			<div></div>
			<p>懂球帝信用卡</p>
		</div>
		<div>
			<div></div>
			<p>扫一扫</p>
		</div>
		</div>
		<ul class="prop-footer">
			<li>
				<div><img src="./img/反馈.png"></div>
				<p>反馈</p>
			</li>
			<li>
				<div><img src="./img/sec.png"></div>
				<p>搜索</p>
			</li>
			<li>
				<div><img src="./img/设置.png"></div>
				<p>设置</p>
			</li>
		</ul>
	</div>
       </div>
      </popup>
</div>	
</template>
<script>
import {TransferDom,Popup} from 'vux';
import { Actionsheet } from 'vux';
import { Alert ,Toast} from 'vux';
	export default {
		directives: {
    		TransferDom
  		},
    	components: {
      		Popup,
      		Alert,
      		Actionsheet,
      		Toast
   		 },
   		 data(){
   		 	return {
   		 		sw:false,
   		 		show1:false,
   		 		show2:false,
   		 		title:'通知',
   		 		content:'要啥通知',
      			menus1: {
        			men1: '分享给朋友',
        			men2: '分享到朋友圈'
      				}
   		 	}
   		 },
		methods:{
			hideFunc() {
				this.$store.commit('changeStatus');
			},
			tanchuang(){
				this.sw=true;
			},
			fenxiang(){
				this.show1=true;
			},
			warn(){
				this.show2=true;
			},
			submit(){
				this.$store.commit('showsubmitpage');
			}
		},
		computed:{
			showthis(){
				return this.$store.state.sta;
			}
		}
	}
</script>
<style lang="less">
	.weui-actionsheet__menu .weui-actionsheet__cell {
		font-size: 0.666667rem;
	}
	.weui-dialog__title,.weui-dialog__btn_primary,.weui-toast__content {
		font-size: 0.533333rem;
	}
	.weui-dialog__bd {
		font-size: 0.48rem;
	}
	.prop-footer{
		display: flex;
	}
	.prop-footer>li{
	display: flex;
	width:33.3%;
	padding: 0.266667rem 0.266667rem 0.266667rem 0.266667rem;
	}
	.prop-footer>li>div>img{
		width: 0.746667rem;
		height: 0.746667rem;
	}
	.prop-footer>li>p{
		line-height: 0.746667rem;
		margin-left: 0.106667rem;
	}
 	.prop{
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	overflow: auto;
	background: white;
	width: 100%;
}
.prop-submit{
	height: 3.733333rem;
	width: 100%;
	text-align: center;
	background: url(./img/bg.jpg);
	background-size: 100% 100%;
	color: white;
    -webkit-filter: grayscale(0.5);/* Webkit */ 
   	filter:gray;/* IE6-9 */ 
   	filter: grayscale(0.5);/* W3C */

}
.prop-submit>p:first-of-type{
	font-size: 0.666667rem;
	height: 1.333333rem;
	line-height: 1.333333rem;
} 
.prop-submit>p:last-of-type{
	height:0.4rem;
	line-height: 0.4rem;
} 
.prop-submit input{
	    height: 0.826667rem;
    width: 3.066667rem;
    font-size: 0.346667rem;
    background: transparent;
    border: 1px solid white;
    margin-top: 0.346667rem;
    color:white;
}
.prop-nav li{
	height: 1.333333rem;
	text-indent: 0.4rem;
}
.prop-nav li>span{
	display:block;
	float: left;
	margin-left: 0.266667rem;
	height: 1.333rem;
	width: 1.093333rem;
	background: url(./img/icon.png) no-repeat left center;
}
.prop-nav li>a{
	display: block;
	float: left;
	color: black;
	height: 1.333rem;
	width: 2.4rem;
	line-height: 1.333333rem;
	font-size:0.48rem;
}
.prop-nav li:first-of-type>span{
	background-position: 0 0.08rem;
}
.prop-nav li:nth-of-type(2)>span{
	background-position: -9.413333rem 0.08rem;
}
.prop-nav li:nth-of-type(3)>span{
	background-position: -11.6rem 0.08rem;
}
.prop-nav li:last-of-type>span{
	background-position: -8.4rem 0.08rem;
}
.list{
	display: flex;
	flex-wrap:wrap;
}
.list>div{
	width: 33.3%;
	text-align: center;
	margin-bottom: 0.32rem;
}
.list>div>div{
	height: 1.333333rem;
    width: 1.333333rem;
	background: url(./img/icon.png) no-repeat;
	background-size: 1200%;
	margin: auto;
}
.list>div>p{
	margin-top: 0.16rem;
}
.list>div:nth-of-type(2) div{
	background-position: -4.0rem 0;
}
.list>div:nth-of-type(3) div{
	background-position: -5.366667rem 0;
}
.list>div:nth-of-type(4) div{
	background-position: -6.65rem 0;
}
.list>div:nth-of-type(5) div{
	background-position: -8.0rem 0;
}
.list>div:nth-of-type(6) div{
	background-position: -9.333333rem 0;
}
.list>div:first-of-type div{
	background-position: -2.666667rem 0;
}
.list>div:last-of-type div{
	background-position: -1.333333rem 0;
}
</style>